<!--
* description: 保养项目-备件选择
* author:wzm
* createdDate:2020-1-25
-->

<template>
  <section class="editAreaAudit">
    <el-dialog
      v-dialogDrag
      :visible="popupsVisibleCar"
      width="75%"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="closeEdit"
      @open="open"
    >
      <dialogHeader
        slot="title"
        :title="titleName"
        :style-type="$store.state.app.dialogType"
      />

      <div class="app-container app-container-table">
        <one-table-template
          ref="multipleTable"
          :dynamic-buttons="tableButtons"
          :dynamic-components="tableComponents"
          :dynamic-api-config="apiConfig"
          :dynamic-table-cols="tableCols"
          :dynamic-form-fields="formField"
          :dynamic-is-show-select="false"
          :dynamic-is-init-table="true"
          :dynamic-is-fix-choose="false"
          :dynamic-is-fix-index="false"
          :dynamic-is-show-more-btn="true"
          :dynamic-table-defult-height="300"
          :is-show-pagination="true"
          :callback-obj="callbackObj"
        />
      </div>
    </el-dialog>
  </section>
</template>

<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import { formMixins } from '@/components/mixins/formMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import api from '@/api/se/serviceActivities'
export default {
  components: {
    OneTableTemplate,
    dialogHeader: () => import('@/components/dialogHeader')
  },

  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins, formMixins],
  props: {
    dynamicEditRowData: { type: Object, default: () => { return {} } },
    popupsVisibleCar: { type: Boolean, default: false }
  },

  data() {
    const viewPageCode = 'areaAudit-edit'
    return {
      titleName: '车辆选择',
      apiConfig: api.queryQualityActivityCar,

      callbackObj: {
        onRowDbClick: (row) => {
          this.sendCode(row)
        }
      },

      // 动态组件-按钮
      tableButtons: [
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          clickEvent: () => this.queryTable(1),
          text: this.$t('sys.button.query'), // 查询
          position: 'right',
          fuzzySearch: true
        },
        {
          compKey: 'btnKey2',
          size: 'small',
          clickEvent: () => this.reset(),
          text: this.$t('sys.button.reset'),
          position: 'right' // 重置
        }
      ],

      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [
            {
              compKey: 'compKey1',
              labelName: 'VIN码：',
              codeField: 'vin',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey2',
              labelName: '车主车牌号：',
              codeField: 'carLicense',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey3',
              labelName: '车主姓名：',
              codeField: 'custName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey4',
              labelName: '车主手机号：',
              codeField: 'phone',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: 8
            }
          ],

      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            {
              prop: 'vin',
              label: 'VIN',
              width: 140
            },
            {
              prop: 'dlrName',
              label: '门店名称'
            },
            {
              prop: 'dlrCode',
              label: '门店编码'
            },
            {
              prop: 'custName',
              label: '车主姓名'
            },
            {
              prop: 'carLicense',
              label: '车主车牌号'
            },
            {
              prop: 'phone',
              label: '车主手机号'
            }
          ],
      // 表单数据（无需赋值，由混入对象赋值）
      formField: this.$utils.getFormField(
        this,
        {
          vin: '',
          phone: '',
          carLicense: '',
          custName: ''
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      )
    }
  },

  methods: {
    open() {
      this.queryTable(1)
    },

    // 关闭弹窗
    closeEdit() {
      this.$emit('close', false)
      this.clearData()
    },

    // 双击获取数据传到父组件
    sendCode(row) {
      this.$emit('returnCarData', row)
      this.closeEdit()
    }
  }

}
</script>

